<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jQuery/ui-1.8.16/css/redmond/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid-4.3.0/css/ui.jqgrid.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid-4.3.0/css/ui.multiselect.css" />
		
		<script type="text/javascript" src="../js/jQuery/jquery-1.5.2.min.js"></script>
		<script type="text/javascript" src="../js/jQuery/ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/i18n/grid.locale-cn.js" ></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/ui.multiselect.js"></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/jquery.jqGrid.min.js" ></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/jquery.tablednd.js"></script>
		
		
		<style type="text/css">
			html, body {
				width:		100%;
				height:		100%;					
				padding:	0;
				margin:		0;
				overflow:	auto; /* when page gets too small */
				font-size: 12px;
			}
			
			#container {
				height:		100%;	
				min-height:	300px;				
				width:		100%;
				margin:		0 0 0 0;
			}
			
			#gridpanel {padding: 0 0 0 0; margin: 0 0 0 0}
		</style>
		
		<script type="text/javascript">
			var $j = jQuery.noConflict();
			$j(function() {
				$j("#list2").jqGrid({
				   	url:'../basic/UserController/searchUser.action',
					datatype: "json",
					width:document.body.clientWidth,
					height: '100%',
					jsonReader: {
						root: "rows",
						page: "page",
						total: "total",
						records: "records",
						repeatitems:false,
						id:"userId"
					},
				   	colNames:['ID','用户名', '密码', '邮件'],
				   	colModel:[
				   		{name:'userId',index:'userId', width:55},
				   		{name:'userName',index:'userName', width:90},
				   		{name:'password',index:'password', width:100},
				   		{name:'email',index:'email', width:100}		
				   	],
				   	rowNum:10,
				   	rowList:[10,20,30],
				   	pager: '#pager2',
				   	sortname: 'userId',
					recordpos: 'left',
				    viewrecords: true,
				    sortorder: "desc",
					multiselect: true,
					//    ,
				    //caption:"JSON Example"
				});
				$j("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false,search:true});

				$j("#searchBtn").button().click(function() {
				});
				$j("#resetBtn").button().click(function() {
				});
			});
		</script>
	</head>
	
	<body>
		<table width="95%" border="0" align="center">
			<tr>
				<td>用户名</td>
				<td>
					<input type="text">
				</td>
				<td>email</td>
				<td>
					<input type="text">
				</td>
			</tr>
			<tr>
				<td align="right" colspan="4">
					<button id="searchBtn">查询</button><button id="resetBtn">重置</button>
				</td>
			</tr>
		</table>
		<table id="list2" align="center"></table>
		<div id="pager2"></div>
	</body>
</html>